<template>
  <a-modal class="common-modal" :title="title" :footer="null" :width="500" :visible="visible" :confirm-loading="confirmLoading" @cancel="handleCancel" :maskClosable="false" style="top:5%;">
    <a-spin :spinning="confirmLoading">
      <a-form :model="formState" @validateFields="handleOk" ref="formRef" layout="vertical" class="common-modal-content">
        <a-row :gutter="24">
          <a-col :span="19">
            <a-row>
              <a-col :span="24">
                <a-form-item :label="$t('deviceManage.waterLineNo')" name="hangerLineId" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, message: $t('deviceManage.pleaseSelectWaterLineNo') }]">
                  <a-select v-model:value="formState.hangerLineId" allowClear :placeholder="$t('common.pleaseSelect')" @change="setMainTrackList(formState.hangerLineId)">
                    <a-select-option v-for="item in selectOptions.waterThreeList" :key="item" :value="item.id">{{ item.lineNo }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item :label="$t('hangManage.trackCode')" name="masterTrackId" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, message: $t('other.pleaseSelectTrack') }]">
                  <a-select v-model:value="formState.masterTrackId"  :placeholder="$t('common.pleaseSelect')">
                    <a-select-option v-for="item in mainTrackList" :key="item.masterTrackNo" :value="item.id">{{ item.masterTrackNo }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item :label="$t('hangManage.stationNumber')" name="num" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="[{ required: true, message: $t('hangManage.pleaseInputAddStationNumber') }]">
                  <a-input-number :min="1" :max="60" v-model:value="formState.num" :placeholder="$t('hangManage.pleaseInputAddStationNumber')"/>
                </a-form-item>
              </a-col>
            </a-row>

          </a-col>
        </a-row>

      </a-form>
      <div class="common-modal-footer">
        <a-button @click="handleCancel" class="cancel">{{ $t('common.cancel') }}</a-button>
        <a-button @click="handleOk" type="primary" class="confirm">{{ $t('common.ok') }}</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script setup name="addDialog">
import {nextTick, ref} from 'vue';
import {cloneDeep, isEmpty} from 'lodash'
import axios from '@/utils/request'
import { url } from './config'

import i18n from '@/locales/index'
const { t } = i18n.global
// const emits = defineEmits(['ok'])
const labelCol = {span: 23}
const wrapperCol = {span: 23}
const emits = defineEmits(['ok', 'backValues'])
let title = ref('')
let visible = ref(false)
let isEdit = ref(false)
let confirmLoading = ref(false)
const selectOptions = ref({})
let recordInfo = ref({})
let formState = ref({})
const formRef = ref()
let mainTrackList = ref([])
let fileList = ref([])

const setMainTrackList = async (lineId) => {
  formState.value.masterTrackId=''
  if (!isEmpty(lineId)){
    const res = await axios.postAction(url.waterThreeUrl)
    if (res.success){
      res.data.forEach(item => {
        if (item.id == lineId) {
          mainTrackList.value = item.masterTrackList;
        }
      })
    }

  }
}
const edit = async (record, editable) => {
  initModalData(record, editable)
  await nextTick()
  formRef.value.resetFields()
  formState.value = cloneDeep(record)
}
const initModalData = (record, editable) => {
  title.value = t('other.addStation')
  recordInfo.value = Object.assign({}, record)
  visible.value = true
  isEdit.value = editable
}
const handleOk = async () => {
  try {
    const values = await formRef.value.validateFields();
    confirmLoading.value = true
    emits('backValues', values)
    confirmLoading.value = false;
    visible.value = false
  } catch (err) {
    console.log('0000000', err);
  }
  confirmLoading.value = false
};
const handleCancel = () => {
  visible.value = false
  initModalStatus()
}
const initModalStatus = () => {
  confirmLoading.value = false
  formState.value = {}
  formRef.value.resetFields()
  fileList.value = []
}
const initSelectOptions = (obj) => {
  selectOptions.value = obj
}
defineExpose({
  edit,
  initSelectOptions,
})

</script>
